<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<link rel="stylesheet" href="/wk2un10/houtai/lib/layui/css/layui.css">
<style>
 		.layui-table-cell{
 		height:auto !important;
 		}
</style>
</head>
<body>

	<div class="layui-form-item" style="margin-top: 20px;" onsubmit="false">
				<div class="layui-form-item">
					<label class="layui-form-label">产品名</label>
					<div class="layui-input-inline" style="width: 120px;">
						<input type="text" name="id" id="txtName"  class="layui-input">
					</div>
					<button class="layui-btn" id="search" data-type="reload">查询</button>
				</div>
		</div>
		<!--lay-filter="test"，给表格加的一个过滤器，当我有一个点击的操作-->
		<table class="layui-hide" id="test" lay-filter="test"></table>
		<!--数据表格-->
		<script type="text/html" id="toolbarDemo">
			<!--表头上面引入了一个添加用户的操作-->
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="addUser">添加产品</button>
			</div>
		</script>
		<script type="text/html" id="barDemo">
			<!--在表格的行内加的工具-->
			<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		
		<script type="text/html" id="imgtmp">
			<img src="/wk2un10/{{d.imgUrl}}" style="width: 150px; height: 100px;">
		</script>
		<!--检查js文件是否引入成功-->
		
		<script type="text/javascript" src="/wk2un10/houtai/lib/layui/layui.js"></script>
		<script>
			layui.use('table', function() { //加载表格模块
				var table = layui.table;
				var $=layui.jquery;
				table.render({ //初始化数据表格的，（专业的叫法渲染表格）
					elem: '#test', //table的id
					toolbar: '#toolbarDemo', //开启头部工具栏
					//请求的地址
					url: '/wk2un10/PictureSqlServlet', //请求服务器的连接地址
					where: {
						method:'ProListJson'
					},  
					method: 'POST', //请求的方式
					cols: [
						[{
							field: 'id',
							title: 'ID',
							width: 80,
						},{
							field: 'imgUrl',
							title: '图片',
							width: 250,
							align:'center',
							templet:'#imgtmp',
						},{
							field: 'productTypeName',
							title: '系列',
							width: 200,
						},{
							title: '操作',
							width: 180,
							toolbar: '#barDemo'
						}]
					],
					id:'testReload',
					page: true
				});
				table.on('toolbar(test)', function(obj) {
					switch(obj.event) {
						case 'addUser':
							//						
							layer.open({ 
								type: 2,
								area: ['500px', '400px'], 
								content:'/wk2un10/pictureSqladd', 
								  
								title: '添加产品',
								end:function(){
									window.location.reload();
								}
							});
							break;
					};
				});
				table.on('tool(test)', function(obj) {
					if(obj.event === 'del') {
						console.log(obj.data);
						var url ='/wk2un10/PictureSqlServlet';
						
						$.post(url, {id:obj.data.id,method:'delete'},
							function(data) {
								if(data.count>0){
									console.log('刪除成功');
									window.location.reload();
								}
							}, "json");
					} else if(obj.event === 'edit') {
						layer.open({ 
							type: 2,
							area: ['500px', '400px'], 
							content: '/wk2un10/pictureSqlupdate', 
							title: '编辑用户',
							success:function(layero,index){
								var body=layer.getChildFrame('body',index);
								body.contents().find("#id").val(obj.data.id);
							},
							end:function(){
								window.location.reload();
							}
						});
					} 
				});
				
				
				$('#search').on('click',function(){
					var name=$("#txtName").val();
					console.log(name);
					table.reload('testReload',{
						
						where:{
							'id':name
							
						}
					});
				});
			});
		</script>
</body>
</html>